<!-- 待映组件 -->
<template>
	<div class="mv-comming">
		<!-- 近期最受欢迎组件的开始 -->
		<MostExpected></MostExpected>
		<!-- 近期最受欢迎组件的结束 -->
		<!-- 分隔符开始 -->
		<div class="seperator"></div>
		<!-- 分隔符结束 -->
		<!-- 时间列表开始 -->
		<div class="mv-list">
			<div class="mv-list-item" v-for="(item, key) in groupList" :key="key">
				<div class="comming-title">{{ item[0].comingTitle }}</div>
				<MovieList :list="item"></MovieList>
			</div>
		</div>
		<!-- 时间列表结束 -->
	</div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import MostExpected from '@/components/MostExpected.vue';
import MovieList from '@/components/MovieList.vue';
// 模块名字叫 _
import _ from 'lodash';
export default {
	// import引入的组件需要注入到对象中才能使用
	components: {
		MostExpected,
		MovieList,
	},
	// props: ['list'],
	props: {
		list: {
			type: Array,
			default: [],
		},
	},
	data() {
		// 这里存放数据
		return {};
	},
	// 监听属性 类似于data概念
	computed: {
		groupList: function () {
			// let obj = {};
			/*
				obj = {
					"2022-04-29":[v1,v3,v5.....],
					"2022-05-20":[v2,v4,v6....],
					.........
				}
			*/
			// this.list.forEach((v) => {
			// 	if (obj[v.rt]) {
			// 		obj[v.rt].push(v);
			// 	} else {
			// 		// obj['2022-04-29] = []
			// 		obj[v.rt] = [];
			// 		obj[v.rt].push(v);
			// 	}
			// });
			let list = _.groupBy(this.list, function (v) {
				return v.rt;
			});
			// console.log(list.keys());
			return Object.keys(list)
				.sort()
				.reduce((obj, key) => {
					obj[key] = list[key];
					return obj;
				}, {});
			// console.log(obj);
			// // 对数据进行排序
			// return list;
		},
	},
	// 监控data中的数据变化
	watch: {},
	// 方法集合
	methods: {},
	// 生命周期 - 创建完成（可以访问当前this实例）
	created() {},
	// 生命周期 - 挂载完成（可以访问DOM元素）
	mounted() {},
	beforeCreate() {}, // 生命周期 - 创建之前
	beforeMount() {}, // 生命周期 - 挂载之前
	beforeUpdate() {}, // 生命周期 - 更新之前
	updated() {}, // 生命周期 - 更新之后
	beforeDestroy() {}, // 生命周期 - 销毁之前
	destroyed() {}, // 生命周期 - 销毁完成
	activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less" scoped>
@import url('@/assets/border.less');
.mv-comming {
	.seperator {
		height: 0.1rem;
		background: #f5f5f5;
		margin: 0.05rem 0;
		.border-1px(1px 0 1px 0,#eee);
	}
}
</style>
